<!DOCTYPE html>
<html lang="en">

<head>
    <title>加华教育订课系统</title>
    <#include "/jh/app/components/meta.html" />
    <#include "/jh/app/components/stylesheets.html" />
    <link rel="stylesheet" href="/jh/app/stylesheets/index.css?v=1">

    <!-- 圣诞主题 -->
    <link rel="stylesheet" href="/jh/app/stylesheets/ChristmasIndex.css">
    <link href="https://cdn.bootcss.com/animate.css/3.7.0/animate.min.css" rel="stylesheet">
    <style>
  body {
    /*background-color: black;*/
    overflow: hidden;
  }

  .star0 {
    height: 1px;
    width: 1px;
    opacity: 1;
    position: absolute;
  }

  .star1 {
    height: 2px;
    width: 2px;
    border-radius: 50%;
    opacity: 1;
    position: absolute;
  }

  .star2 {
    height: 3px;
    width: 3px;
    border-radius: 50%;
    opacity: 1;
    position: absolute;
  }

  .star3 {
    height: 4px;
    width: 4px;
    border-radius: 50%;
    opacity: 1;
    position: absolute;
  }
</style>
</head>

<body style="height: 100%">
    <div id='sky' style="width: 20px"></div>
    <div id="app">
        <div class="logo">
            <!-- <img src="/jh/app/assets/img/logo.png" class="am-img-responsive" /> -->
            
            <!-- 圣诞主题 -->
            <img src="https://i.loli.net/2018/12/17/5c177f8da8a3e.png" class="am-img-responsive" />

        </div>
        <div class="login-form">
            <div class="login-form-field">
                <div class="login-form-field-icon">
                    <!-- <img src="/jh/app/assets/img/icon-user.png" class="am-img-responsive" /> -->
                    
                    <!-- 圣诞主题 -->
                    <img src="https://i.loli.net/2018/12/17/5c177f8da8029.png" class="am-img-responsive" />

                </div>
                <div class="login-form-field-input">
                    <input type="text" v-model="account" placeholder="用户名 / 手机号" />
                </div>
            </div>
            <div class="login-form-field">
                <div class="login-form-field-icon">
                    <!-- <img src="/jh/app/assets/img/icon-pwd.png" class="am-img-responsive" /> -->

                    <!-- 圣诞主题 -->
                    <img src="https://i.loli.net/2018/12/17/5c177f8da5ae2.png" class="am-img-responsive" />

                </div>
                <div class="login-form-field-input">
                    <input type="password" v-model="password" placeholder="密码" />
                </div>
            </div>
            <div class="login-form-submit">
                <button class="am-btn theme-background-color1" @click="login">登录</button>
            </div>
        </div>
        <#include "/jh/app/components/footer.html" />
    </div>
    <#include "/jh/app/components/scripts.html" />

    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9/crypto-js.min.js"></script>
    <script src="https://cdn.bootcss.com/web-animations/2.3.1/web-animations.min.js"></script>
    <script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data() {
            return {
                account: '',
                password: ''
            }
        },
        mounted: function() {},
        methods: {
            login() {
                loading();
                var self = this;
                var encoded = self.aesCBC(self.password);
                var param = Qs.stringify({
                    account: self.account,
                    password: encoded
                });
                axios({
                    url: '/jh/app/login',
                    method: 'post',
                    data: param,
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                })
                .then(function(response) {
                    if (response.data.status == 200) {
                        endLoading();
                        var state = "${state!''}"
                        if (state != '') {
                            window.location.href = state;   
                        }else{
                            window.location.href = "/jh/app/list";   
                        }
                        // msg("登录成功");
                    } else {
                        endLoading();
                        msg("登录失败：" + response.data.msg);
                        console.log(response.data);
                    }
                })
                .catch(function(error) {
                    endLoading();
                    msg("登录失败");
                    console.log(error);
                });
            },
            aesCBC(text) {
                var aesText = text;
                var key = CryptoJS.enc.Utf8.parse('${key!}');
                var iv = CryptoJS.enc.Utf8.parse('RandomInitVector');
                aesText = CryptoJS.AES.encrypt(text, key, {
                    iv: iv,
                    mode: CryptoJS.mode.CBC,
                    padding: CryptoJS.pad.Pkcs7
                }).toString();
                return aesText;
            }
        }
    })
    </script>
    <script type="text/javascript">
        function onSnow(){
            var universe = document.getElementById('sky');
            var star = document.createElement('img');
            // var speed = 6000 * (Math.random() * maxTime + 1);
            // star.setAttribute('class', 'star' + (3 - Math.floor((speed / 1000) / 8)));
            var type = (Math.round(Math.random()*10)) % 3
            console.log(type)
            if (type == 0) {
                star.setAttribute('class', 'Xmas-flower11 flower');
                star.setAttribute('src','https://i.loli.net/2018/12/17/5c177f8da54e1.png')
            }else if(type ==1){
                star.setAttribute('class', 'Xmas-flower21 flower');
                star.setAttribute('src','https://i.loli.net/2018/12/17/5c177f8da54f1.png')
            }else if(type ==1){
                star.setAttribute('class', 'Xmas-flower31 flower');
                star.setAttribute('src','https://i.loli.net/2018/12/17/5c177f8da612c.png')
            }else{
                star.setAttribute('class', 'Xmas-flower41 flower');
                star.setAttribute('src','https://i.loli.net/2018/12/17/5c177f8da59c2.png')
            }
            var duration = Math.random() * 1000 % 5 + 12
            var delay = (Math.round(Math.random()*10)) % 3 * 100
            var left = (Math.round(Math.random()*70)) + 20
            var next = (Math.round(Math.random()*10)) % 8 * 200
            delay = next
            var styles = 'left:'+left+'%;animation-duration: '+duration+'s;animation-delay: '+delay+'s;'
            star.setAttribute('style', styles);
            universe.appendChild(star);
            setTimeout(function(){
                onSnow()
            },delay)
        }
        // onSnow()
    </script>
    <script>
  var layerCount = 4;
  var starCount = 1;
  var maxTime = 31;
  var universe = document.getElementById('sky');
  var w = window;
  var d = document;
  var e = d.documentElement;
  var g = d.getElementsByTagName('body')[0];
  var width = w.innerWidth || e.clientWidth || g.clientWidth;
  var height = w.innerHeight|| e.clientHeight|| g.clientHeight;
  height = screen.height
  width = screen.width

  for (var i = 0; i < starCount; ++i) {
    var ypos = Math.round(Math.random() * height);
    var xpos = Math.round(Math.random() * width) % width-20;
    var star = document.createElement('div');


    var speed = 6000 * (Math.random() * maxTime + 1);
    star.setAttribute('class', 'star' + (3 - Math.floor((speed / 1000) / 8)));
    // star.setAttribute('class', 'star' + (3 - Math.floor((speed / 1000) / 8))+' Xmas-flower12 flower');
    star.style.backgroundColor = 'white';//rgb(' + Math.round(Math.random() * 255) + ', ' + Math.round(Math.random() * 255) + ', ' + Math.round(Math.random() * 255) + ')';
    universe.appendChild(star);
    star.animate([{transform: 'translate3d(' + xpos + 'px, ' + 0 + 'px, 0)'},
                  {transform: 'translate3d(' + xpos + 'px, ' + 0 + height + 'px, 0)'}],
                 {delay: Math.random() * -speed, duration: speed, iterations: 1000});


    var snow = document.createElement('img');
    snow.setAttribute('src','https://i.loli.net/2018/12/17/5c177f8da54e1.png')
    universe.appendChild(snow);
    // snow.animate([{transform: 'translate3d(' + xpos + 'px, ' + 0 + 'px, 0)'},
    //               {transform: 'translate3d(' + xpos + 'px, ' + 0 + height + 'px, 0)'}],
    //              {delay: Math.random() * -speed, duration: speed, iterations: 1000});

  }
</script>
</body>

</html>